<script setup lang="ts">
import { onMounted, ref, h } from "vue";
import {
  NFlex,
  NCard,
  NDropdown,
  NButton,
  NSelect,
  NButtonGroup,
  NColorPicker,
  NSpace,
} from "naive-ui";
import { NIcon } from "naive-ui";

import SvgIcon from "../components/SvgIcon.vue";

//接收props
const props = defineProps({
  title: {
    type: String,
    default: "word模板编辑器", // 默认值
  },
  icon: {
    type: String,
    default: "Word-Color", // 默认值
  },
});



/**
 * canvas-editor 组件库引用
 * 实现 word 功能
 */
import Editor, {
  ControlType,
  EditorMode,
  ElementType,
  RowFlex,
} from "@hufe921/canvas-editor";

/**
 * end
 */
let wordEditor = ref<HTMLDivElement | any>(null);
const emit = defineEmits(['saveData'])

/**
 * 定义 word 组件相关的操作函数
 */
let canvaseditor = ref<Editor | null>(null);
const painterMenu = [
  { label: "格式刷复制", key: "copy" },
  // { label: "格式刷应用", key: "paste" },
  { label: "格式刷清除", key: "format" },
];

//保存word
const saveScript = () => {
  const content = canvaseditor.value?.command.getValue();
  const extraSettings = {
    annotations : []
  };
  emit('saveData', { content, extraSettings })
}
// 复制
const copy = () => {
  canvaseditor.value?.command.executeCopy();
};
// 剪切
const cut = () => {
  canvaseditor.value?.command.executeCut();
};
// 粘贴
const paste = () => {
  canvaseditor.value?.command.executePaste();
};

// 格式刷选择
const painterMenuSelect = (key: string) => {
  switch (key) {
    case "copy":
      // 格式刷复制样式
      console.log(key);
      canvaseditor.value?.command.executePainter({ isDblclick: false });
      break;
    case "paste":
      // 格式刷应用样式
      canvaseditor.value?.command.executeApplyPainterStyle();
      break;
    case "format":
      // 格式刷清除样式
      canvaseditor.value?.command.executeFormat();
      break;

    default:
      break;
  }
};
/**
 * 定义格式面板相关的操作函数
 */
const activePlane = ref(true);
const textColor = ref("#000"); // 文本颜色
const showPlane = () => {
  if (activePlane.value) {
    activePlane.value = false;
  } else {
    activePlane.value = true;
  }
};
const closePlane = () => {
  activePlane.value = false;
};
/**
 * end
 *
 */

let valuefont = ref("");
const fontoptions = [
  { label: "微软雅黑", value: "微软雅黑" },
  { label: "宋体", value: "宋体" },
  { label: "黑体", value: "黑体" },
  { label: "Arial", value: "Arial" },
  { label: "Verdana", value: "Verdana" },
  { label: "Times New Roman", value: "Times New Roman" },
  { label: "Georgia", value: "Georgia" },
  { label: "Courier New", value: "Courier New" },
  { label: "Tahoma", value: "Tahoma" },
  { label: "Trebuchet MS", value: "Trebuchet MS" },
  { label: "Palatino Linotype", value: "Palatino Linotype" },
  { label: "Garamond", value: "Garamond" },
  { label: "Courier", value: "Courier" },
];

const onblur = (value: string) => {
  console.log(value);
  // canvaseditor.value?.command.executeSize(36)
  canvaseditor.value?.command.executeFont(value);
};

let valuesize = ref();
const dffsize = [
  { label: "小初", value: 48 },
  { label: "一号", value: 34 },
  { label: "小一", value: 32 },
  { label: "二号", value: 29 },
  { label: "小二", value: 24 },
  { label: "三号", value: 21 },
  { label: "小三", value: 20 },
  { label: "12", value: 12 },
  { label: "14", value: 14 },
  { label: "16", value: 16 },
  { label: "18", value: 18 },
  { label: "22", value: 22 },
  { label: "26", value: 26 },
  { label: "36", value: 36 },
  { label: "38", value: 38 },
  { label: "40", value: 40 },
  { label: "42", value: 42 },
  { label: "44", value: 44 },
  { label: "46", value: 46 },
  { label: "50", value: 50 },
  { label: "52", value: 52 },
];

const onsize = (value: number) => {
  // console.log(value)
  canvaseditor.value?.command.executeSize(value);
};

// 字体加粗
const bold = () => {
  canvaseditor.value?.command.executeBold();
};

// 下划线
const underline = () => {
  canvaseditor.value?.command.executeUnderline();
};
// 删除线
const delete_line = () => {
  canvaseditor.value?.command.executeStrikeout();
};
// 斜体
const italic = () => {
  canvaseditor.value?.command.executeItalic();
};
// 对齐方法
const alignment = (rowFlex: RowFlex) => {
  canvaseditor.value?.command.executeRowFlex(rowFlex);
};

// 字体颜色更改
const editTextColor = (color: string | null) => {
  canvaseditor.value?.command.executeColor(color);
};

// 上标
const Superscript = () => {
  canvaseditor.value?.command.executeSuperscript();
};
// 下标
const Subscript = () => {
  canvaseditor.value?.command.executeSubscript();
};


/**
 * 初始 word 组件库加载函数
 */
onMounted(() => {
  //实例化 Editor 构建函数 word 组件库
  canvaseditor.value = new Editor(
    wordEditor.value,
    {
      header: [
        {
          value: "山东发达面粉集团",
          size: 32,
          color: "#FF0000",
          rowFlex: RowFlex.JUSTIFY,
        },
        {
          value: "\n",
          type: ElementType.SEPARATOR,
        },
      ],
      main: [
        {
          value: "",
        },
      ],
      footer: [
        {
          value: "\n",
          type: ElementType.SEPARATOR,
        },
        {
          value: "集团地址：山东省济南市西城大厦10F",
          size: 18,
        },
      ],
    },
    {
      // mode: EditorMode.DESIGN,
      margins: [100, 80, 100, 80],
      zone: { tipDisabled: false },
      defaultType: "TABLE",
      maskMargin: [60, 0, 30, 0],
      defaultSize: 22,
      header: { top: 40 },
      footer: { bottom: 70 },
    }
  );
});

//插件单选控件
const single = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    control: {
      conceptId: "3",
      type: ControlType.RADIO,
      code: "98175",
      value: [],
      valueSets: [
        {
          value: "同意",
          code: "98175",
        },
        {
          value: "否定",
          code: "98176",
        },
      ],
    },
    value: "",
  });
};

//插件多选控件
const selectCL = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    value: "",
    control: {
      conceptId: "2",
      type: ControlType.SELECT,
      value: null,
      code: null,
      placeholder: "有无",
      prefix: "{",
      postfix: "}",
      valueSets: [
        {
          value: "有",
          code: "98175",
        },
        {
          value: "无",
          code: "98176",
        },
        {
          value: "不详",
          code: "98177",
        },
      ],
    },
  });
};

//插入日期控件
const dftest = () => {
  canvaseditor.value?.command.executeInsertControl({
    type: ElementType.CONTROL,
    value: "",
    control: {
      conceptId: "5",
      type: ControlType.DATE,
      value: [
        {
          value: `2022-08-10 17:30:01`,
        },
      ],
      placeholder: "签署日期",
    },
  });
};

const options_word = [
  { label: '保存', key: '保存' },
]
const wordSelect = (key: string) => {
  if (key === '保存') {
    saveScript()
  }
}
/**
 * 头部标题图标设置
 * 头标下拉菜单设置
 */

let wordIcon = () => {

  return h(NFlex, () => [h(NDropdown, { trigger: "hover", size: "huge", showArrow: true, options: options_word, onSelect: wordSelect }, () => h(NButton, { text: true, style: 'font-size: 24px' }, () => h(SvgIcon, { iconClass: props.icon }))), h('div', props.title)])

};
const header_word = () => wordIcon();

// const zoomValue = 50
const newZoomValue = ref(100);
/**
 * word 表格菜单
 */
const tableMenu = [
  { label: "插入流程表格", key: "a" },
  { label: "插入数据表格", key: "b" },
  { label: "插入多行多列", key: "c" },
];
const tableMenuSelect = (key: string) => {
  console.log(key);
  if (key === "a") {
    canvaseditor.value?.command.executeInsertTable(3, 2);
  } else if (key === "b") {
    canvaseditor.value?.command.executeInsertTable(3, 6);
  } else if (key === "c") {
    canvaseditor.value?.command.executeInsertTable(10, 10);
  }
};
/**
 * end
 */

/**
 * word 控件菜单
 */
const controlMenu = [
  { label: "单选", key: "单选" },
  { label: "多选", key: "多选" },
  { label: "日期", key: "日期" },
];
const controMenuSelect = (key: string) => {
  console.log(key);
  if (key === "单选") {
    single();
  } else if (key === "多选") {
    selectCL();
  } else if (key === "日期") {
    dftest();
  }
};
/**
 * end
 *
 */

const selectoptions = [
  { label: "25%", value: 25 },
  { label: "50%", value: 50 },
  { label: "100%", value: 100 },
  { label: "150%", value: 150 },
  { label: "200%", value: 200 },
];
const selectFunc = (e: number) => {
  // console.log(e)
  // canvaseditor.value?.command.executePageScaleRecovery()

  if (e == 25) {
    console.log(e);

    for (let i = 0; i < 50; i++) {
      canvaseditor.value?.command.executePageScaleMinus()
    }
  } else if (e == 50) {
    console.log(e);
    for (let i = 0; i < 25; i++) {
      canvaseditor.value?.command.executePageScaleMinus()
    }
  } else if (e == 100) {
    canvaseditor.value?.command.executePageScaleRecovery()
  } else if (e == 150) {
    for (let i = 0; i < 10; i++) {
      canvaseditor.value?.command.executePageScaleAdd()
    }
  } else if (e == 200) {
    for (let i = 0; i < 20; i++) {
      canvaseditor.value?.command.executePageScaleAdd()
    }
  } else {
    return;
  }
};

</script>
<template>
  <n-card :title="header_word" closable @close="saveScript">
    <template #header-extra>
      <n-flex justify="space-between">
        <n-flex justify="space-between">
          <!-- 左侧 -->
          <n-flex>
            <n-select v-model:value="newZoomValue" :options="selectoptions" @update:value="selectFunc" />
          </n-flex>
          <!-- 中间 -->
          <n-flex justify="center">
            <n-button @click="copy">复 制</n-button>
            <n-button @click="cut">剪 切</n-button>
            <n-button @click="paste">粘 贴</n-button>
            <n-dropdown trigger="hover" :options="painterMenu" @select="painterMenuSelect">
              <n-button>格式刷</n-button>
            </n-dropdown>

            <n-dropdown trigger="hover" :options="tableMenu" @select="tableMenuSelect">
              <n-button>表格</n-button>
            </n-dropdown>

            <n-dropdown trigger="hover" :options="controlMenu" @select="controMenuSelect">
              <n-button>控件</n-button>
            </n-dropdown>

          </n-flex>
          <!-- 右侧 -->
          <n-flex justify="end">
            <n-button @click="showPlane" ghost>
              <template #icon>
                <n-icon>
                  <svg-icon :icon-class="activePlane ? 'yangshi' : 'chaboxiaoxi-yangshi'" />
                </n-icon>
              </template>
              格式
            </n-button>
          </n-flex>
          <!-- end -->
        </n-flex>
        <slot name="header-extra"></slot>

        <button @click="saveScript">保存</button>
      </n-flex>
    </template>

    <n-flex vertical>

      <slot name="default"></slot>
      <n-flex justify="space-between">
        <n-flex>

        </n-flex>
        <n-flex class="flowsss">
          <div style="border: 1px solid #de1515" ref="wordEditor"></div>
        </n-flex>
        <n-flex>
          <div style="
              width: calc(100vw / 6);
              border: 0px solid #de1515;
              margin-top: 10px;
            ">
            <n-card v-show="activePlane" title="格式" style="height: 100%" closable @close="closePlane">
              <n-flex vertical>
                <div class="my-title">字体</div>
                <n-select v-model:value="valuefont" :options="fontoptions" @update:value="onblur" />
                <n-select v-model:value="valuesize" :options="dffsize" @update:value="onsize" />
                <n-space>
                  <n-button-group size="medium">
                    <n-button type="default" round @click="bold">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitijiacu" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="italic">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixieti" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="underline">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixiahuaxian" />
                        </n-icon>
                      </template>
                    </n-button>

                    <n-button type="default" round @click="delete_line">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="a-bianzu3" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-space>
                  <n-button-group size="medium">
                    <n-button type="default" round @click="alignment(RowFlex.LEFT)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zuoduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="alignment(RowFlex.CENTER)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="juzhongduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" @click="alignment(RowFlex.RIGHT)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="youduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" round @click="alignment(RowFlex.JUSTIFY)">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zuoyouduiqi" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-space>
                  <n-button-group size="medium">
                    <n-button type="default" round @click="Superscript">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitishangbiao" />
                        </n-icon>
                      </template>
                    </n-button>
                    <n-button type="default" round @click="Subscript">
                      <template #icon>
                        <n-icon>
                          <SvgIcon iconClass="zitixiabiao" />
                        </n-icon>
                      </template>
                    </n-button>
                  </n-button-group>
                </n-space>
                <n-flex justify="space-between">
                  <div class="my-title">文本颜色</div>
                  <n-color-picker v-model="textColor" :show-alpha="false" :modes="['hex']"
                    :on-update:value="editTextColor" />
                </n-flex>
              </n-flex>
            </n-card>
          </div>
        </n-flex>
      </n-flex>
    </n-flex>
  </n-card>
</template>

<style scoped>
.flowsss {
  overflow: auto;
  height: calc(100vh - 260px);
}

.flowsss::-webkit-scrollbar {
  display: none;
}

.my-title {
  font-size: large;
  font-weight: 700;
}

.text-color {
  width: 50px;
  height: 20px;
  background-color: black;
}
</style>
